<template>
  <div class="wrap">
    <div class="page-head">
      <a-breadcrumb>
        <a-breadcrumb-item>{{$t('device.device.60zedd3ezeo3')}}</a-breadcrumb-item>
        <a-breadcrumb-item>{{$t('device.device.60zedd3ezeo2')}}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <c-table-search :loading="form.loading" v-model:model="form.data" @refresh="getData">
      <a-col :span="8">
        <a-form-item field="keywords" :label="$t('device.device.60zedd3f1sg1')">
          <a-input v-model="form.data.keywords" :placeholder="$t('device.device.60zedd3f1sg2')" />
        </a-form-item>
      </a-col>
      <template v-slot:refresh>
        <a-button type="outline" @click="refresh">
          <template #icon>
            <icon-loop />
          </template>
        </a-button>
      </template>
      <template v-slot:addEquipment>
        <a-button type="primary" v-permission="['fiveGAdevice:add']" @click="form.create.show = true">
          <template #icon>
            <icon-plus />
          </template>
          {{ $t('device.device.60zedd3ezzk0') }}
        </a-button>
      </template>
    </c-table-search>
    <div class="table-scroll">
      <c-table :list="form.list" :loading="form.loading" :count="form.count" v-model:data="form.data"
        @refresh="getData">
        <a-table-column :title="$t('device.device.60zedd3ezeo1')" ellipsis tooltip :width="200">
          <template #cell="{ record }">
            {{ record.deviceId ? record.deviceId : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('device.device.60zedd3ezeo0')" ellipsis tooltip :width="240">
          <template #cell="{ record }">
            {{ record.deviceName ? record.deviceName : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('device.device.60zedd3f0a80')" ellipsis tooltip :width="200">
          <template #cell="{ record }">
            <div class="status">
              <a-tag v-if="record.deviceType === 0">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28bn10') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 1">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28bn00') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 2">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28d5k0') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 3">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28d9g0') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 4">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dc80') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 5">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dec0') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 6">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dgs0') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 7">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dj80') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 8">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dl40') }}</a-tag>
              <a-tag v-else-if="record.deviceType === 999">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dn40') }}</a-tag>
            </div>
          </template>
        </a-table-column>
        <a-table-column :title="$t('device.device.60zedd3ezeo4')" ellipsis tooltip :width="240">
          <template #cell="{ record }">
            {{ record.providerCode ? record.providerCode : '-' }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('spectLog.spectLog.60zekq5nyw00')" ellipsis tooltip :width="150">
          <template #cell="{ record }">
            <div class="status">
              <a-tag color="#f53f3f" v-if="record.workState === 0">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28dy80') }}</a-tag>
              <!-- <a-tag v-else-if="record.workState === 3">威胁</a-tag> -->
              <a-tag color="rgb(255 186 0)" v-else-if="record.workState === 2">{{ $t('fiveGAdevice.fiveGAdevice.63o39g28e6g0') }}</a-tag>
              <a-tag color="#00b42a" v-else>{{ $t('fiveGAdevice.fiveGAdevice.63o39g28e9o0') }}</a-tag>
            </div>
          </template>
        </a-table-column>

        <a-table-column :title="$t('device.device.60zedd3f0pc0')" ellipsis tooltip :width="180">
          <template #cell="{ record }">
            {{ record.radius ? record.radius : '1300' + $t('device.device.60zedd3f0uc0') }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('device.device.60zedd3ezeo5')" ellipsis tooltip :width="180">
          <template #cell="{ record }">
            {{ record.deviceAltitude ? record.deviceAltitude : '-' + $t('device.device.60zedd3f0uc0') }}
          </template>
        </a-table-column>
        <a-table-column :title="$t('device.device.60zedd3f14c0')" fixed='right' :width="260">
          <template #cell="{ record }">
            <a-space>
              <a-button type="text" v-permission="['fiveGAdevice:acrea']" @click="handleDetail(record)">{{
                $t('device.device.60zedd3f19s0') }}</a-button>
              <a-button type="text" v-permission="['fiveGAdevice:edit']" @click="handleUpdata(record)">{{
                $t('device.device.60zedd3f1hs0') }}</a-button>
              <a-button type="text" v-permission="['fiveGAdevice:delete']" status="danger"
                @click="handleDelete(record)">{{
                  $t('device.device.60zedd3f1n00') }}</a-button>
            </a-space>
          </template>
        </a-table-column>
      </c-table>
      <Create @refresh="getData" v-model:show="form.create.show"></Create>
      <Updata @refresh="getData" v-model:show="form.update.show" v-model:data="form.update.data"></Updata>
      <CArea @refresh="getData" v-model:show="form.area.show" :list="form.list" v-model:data="form.area.data"></CArea>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { apifiveGADeviceList, apiDeviceDelete } from '@/api/device'
const Create = defineAsyncComponent(() => import('./components/create.vue'))
const Updata = defineAsyncComponent(() => import('./components/updata.vue'))
const CArea = defineAsyncComponent(() => import('./components/acrea.vue'))
// const router = useRouter()
const local = useLocal()
const emit = defineEmits(['refresh'])
const refresh = () => {
  emit('refresh')
}
const form = reactive({
  create: {
    show: false
  },
  update: {
    loading: false,
    show: false,
    data: {},
  },
  delete: {
    show: false
  },
  area: {
    show: false,
    data: {},
  },
  // auths:[],
  // allAuths:[],
  data: {
    keywords: '',
    page: 1,
    pageSize: 10,
    uid: local.usermsg.id == 3 ? 0 : local.usermsg.id
  },
  loading: false,
  list: [],
  count: 0
})
// 5G-A设备列表
const getData = async () => {
  form.loading = true
  const { code, data } = await apifiveGADeviceList({
    ...form.data,
    keywords: form.data.keywords
  })
  form.loading = false
  if (code != 200) return;
  // form.list = data.list
  // console.log(data.list,form.list)
  form.list = data.list.map((item: any, index: any) => {
        return {
            ...item,
            "id": item.deviceId || ('id' + index),
            "name": item.deviceName || ('name' + index),
            "radius": 1300,
            "point": `${item.deviceLongitude || 116.407386},${item.deviceLatitude || 39.904178}`,
            "address": "",
            "oemSn": "",
            "alias": "",
            "type": item.deviceType,
            "groupId": 0,
            "groupName": "",
            "ip": "",
            "province": "",
            "city": "",
            "district": "",
            "provinceId": 0,
            "cityId": 0,
            "districtId": 0,
            "uid": 0,
            "status": item.workState,
            "mac": "",
            "reserveType": 1
        }
    })
    form.count = data.total
}
// 查看管控区域
const handleDetail = (record: any) => {
  form.area.data = cloneDeep(record)
  form.area.show = true
}
// 编辑
const handleUpdata = (record: any) => {
  form.update.data = cloneDeep(record)
  form.update.show = true
}
// 删除
const handleDelete = async (record: any) => {
  useModal.warning({
    content: t('device.device.60zedd3f1sg0'),
    onBeforeOk: async () => {
      const { code } = await apiDeviceDelete({
        id: record.id
      })
      if (code != 200) return false;
      useMessage.success()
      getData()
      return true
    }
  })
}
onBeforeMount(() => {
  getData()
})
</script>

<style scoped lang="less">
.show {
  display: none
}

.color {
  width: 30px;
  height: 30px;
  border-radius: 2px;
}
</style>
